<template>
  <a-modal
    :visible="visible"
    :title="$t('详情')"
    :width="width"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
    class="customHeight customHeightChild modal_title"
    v-drag
  >
    <template slot="footer">
      <a-button @click="handleCancel" :loading="confirmLoading">{{$t('关闭')}}</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <div class="table-page-search-wrapper">
        <div style="margin-bottom: 20px;font-weight:600;color:#000">
          <span>{{$t('商品名称')}}：{{ info.goodsName }}</span>
          <span v-if="info.goodsForm==2||info.goodsForm==8" style="margin-left: 30px">{{$t('套餐单价')}}：{{ info.avgPrice.toFixed(2) }}</span>
        </div>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :customRow="customRow"
          class="j-table-force-nowrap"
        >
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
import { getAction, downFile } from '@/api/manage'
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      width: 1200,
      columns:[],
      columns1: [
        {
          title: this.$t('会员类型'),
          align: 'center',
          dataIndex: 'memberTypeId_dictText'
        },
        {
          title: this.$t('业务笔数'),
          align: 'center',
          dataIndex: 'count',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售数量'),
          align: 'center',
          dataIndex: 'saleNum',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售金额'),
          align: 'center',
          dataIndex: 'sale',
          customRender: function (t, r) {
            return t.toFixed(2)
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('售币值'),
          align: 'center',
          dataIndex: 'coin',
          customRender: (text, r) => {
            return text.toFixed(2);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        }
      ],
      columns2: [
        {
          title: this.$t('会员类型'),
          align: 'center',
          dataIndex: 'memberTypeId_dictText'
        },
        {
          title: this.$t('业务笔数'),
          align: 'center',
          dataIndex: 'count',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售数量'),
          align: 'center',
          dataIndex: 'saleNum',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售金额'),
          align: 'center',
          dataIndex: 'sale',
          customRender: function (t, r) {
            return t.toFixed(2)
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('充币值'),
          align: 'center',
          dataIndex: 'coin',
          customRender: (text, r) => {
            return text.toFixed(2);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        }
      ],
      columns3: [
        {
          title: this.$t('会员类型'),
          align: 'center',
          dataIndex: 'memberTypeId_dictText'
        },
        {
          title: this.$t('业务笔数'),
          align: 'center',
          dataIndex: 'count',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售数量'),
          align: 'center',
          dataIndex: 'saleNum',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售金额'),
          align: 'center',
          dataIndex: 'sale',
          customRender: function (t, r) {
            return t.toFixed(2)
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
      ],
      columns4: [
        {
          title: this.$t('会员类型'),
          align: 'center',
          dataIndex: 'memberTypeId_dictText'
        },
        {
          title: this.$t('业务笔数'),
          align: 'center',
          dataIndex: 'count',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售数量'),
          align: 'center',
          dataIndex: 'saleNum',
          customRender: (text, r) => {
            return text.toFixed(0);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('销售金额'),
          align: 'center',
          dataIndex: 'sale',
          customRender: function (t, r) {
            return t.toFixed(2)
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('币值'),
          align: 'center',
          dataIndex: 'coin',
          customRender: (text, r) => {
            return text.toFixed(2);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('限时币'),
          align: 'center',
          dataIndex: 'limitCoin',
          customRender: (text, r) => {
            return text.toFixed(2);
          },
          customCell: function (t, r) {
            return {
              style: {
                textAlign: 'right',
              },
            }
          },
        }
      ],
      dataSource: [],
      info: {},
    }
  },
  methods: {
    show(record) {
      this.visible = true
      if(record.goodsForm==8){
        this.columns=this.columns1
      }
      if(record.goodsForm==2){
        this.columns=this.columns2
      }
      if(record.goodsForm==3||record.goodsForm==4){
        this.columns=this.columns3
      }
      if(record.goodsForm==5){
        this.columns=this.columns4
      }
      this.info = Object.assign({}, record)
      this.searchQuery();
    },
    customRow(r, i) {
      return {
        style: {
          fontWeight: r.memberTypeId_dictText == this.$t('合计') ? 700 : 400,
        },
      }
    },
    searchQuery() {
      let query = {
        bTime:this.info.bTime,
        eTime:this.info.eTime,
        goodsId: this.info.goodsId,
        goodsForm: this.info.goodsForm,
        groupBy: 'goods_id,member_type_id'
      }
      this.confirmLoading = true
      getAction('/report/day/memberPackageSummary/list', query)
        .then((res) => {
          if (res.success) {
            let total = {},
              list = ['memberTypeId_dictText', 'coin', 'count', 'limitCoin', 'sale', 'saleNum']
            list.forEach((lt, i) => {
              if (i == 0) {
                total[lt] = this.$t('合计')
              } else {
                total[lt] = 0
              }
            })
            res.result.forEach((ds) => {
              for (var key in ds) {
                if (total[key] !== undefined && !isNaN(ds[key])) {
                  total[key] += ds[key]
                }
              }
            })
            this.dataSource = res.result
            this.dataSource.push(total)
          }
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    handleExportXls(fileName) {
      if (!fileName || typeof fileName != 'string') {
        fileName = this.$t('导出文件')
      }
      let query = {
        createTime_begin:this.info.createTime_begin,
        createTime_end:this.info.createTime_end,
        gameId: this.info.gameId,
        gameTypeId: this.info.gameTypeId,
        groupBy: 'game_type_id,game_id,output_type,device_id,machine_no',
        outputType: this.info.outputType,
      }
      downFile('/game/bisGameCoinRecord/exportReportXls', query).then((data) => {
        if (!data) {
          this.$message.warning(this.$t('文件下载失败'))
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
  },
}
</script>